{% extends 'base.html' %}
{% block head %}
<!-- Bmap -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=5zQ9nwYR2PShtg3XHWEFDp9yGAy1E6vb"></script>
{% end %}
{% block body %}
<!-- wrapper main container -->
<div id="wrapper">

    <!-- Page Heading -->
    <!-- 项目说明 -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                数据可视化  <small>数据展示方式示例</small>
            </h1>
            <!-- 分页暂时不使用
            <ol class="breadcrumb">
                <li class="active">
                    <i class="fa fa-dashboard"></i> Dashboard
                </li>
            </ol>
            -->
        </div>
    </div>
    <!-- /.row -->

    <!-- 查询输入 -->
    <div class="row">
        <div class="col-lg-6 col-md-offset-4">
            <div class="col-lg-6">
                <!--<form class="input-group" action="/info/chart" method="get" id="companyName">-->
                    <input type="text" class="form-control" name='companyName' id="searchName"
                           placeholder="Search for company group info...">
                    <span class="input-group-btn">
                    <!--<button class="btn btn-default" name="searchBtn" type="submit">Search</button>-->
                    <button class="btn btn-default" name="searchBtn" id="search">Search</button>
                    </span>
                <!--</form>-->
            </div>
        </div>
    </div>


    <!-- chart row -->
    <div class="row chart">
        <!-- chart1 -->
        <div class="col-lg-12 visible-panel">
            <h3 class="page-header">
                图表1  <small>timeline示例</small>
            </h3>
            <div class="thumbnail">
                <div class="chart-content"  id="chart1">

                </div>
            </div>
        </div>
        <!-- end chart1 -->
    </div>

    <div class="row chart">
        <!-- chart1-1 -->
        <div class="col-lg-6">
            <h3 class="page-header">
                图表1-1  <small>timeline示例</small>
            </h3>
            <div class="thumbnail">
                <div class="chart-content"  id="chart1-1">

                </div>
            </div>
        </div>
        <!-- end chart1-1 -->

        <!-- chart1-2 -->
        <div class="col-lg-6">
            <h3 class="page-header">
                图表1-2  <small>timeline示例</small>
            </h3>
            <div class="thumbnail">
                <div class="chart-content"  id="chart1-2">

                </div>
            </div>
        </div>
        <!-- end chart1-2 -->
    </div>
    <!-- end wrapper -->
</div>
{% end %}

{% block script %}
<script>

</script>
<!-- chart1 script -->
<script type="text/javascript">
    var companyTimeStepData;
    $(function(){
        $("#search").click(function(){
            //alert($("#searchName").value())
            var companyName = $("#searchName").val()
            $.ajax({
                type: "GET",
                contentType:'application/json; charset=utf-8',
                url: '/chart/companyInfo',
                data: {'companyName':companyName},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    companyTimeStepData = data

                    // company similar company salary compare
                    var mychart1_1 = echarts.init(document.getElementById('chart1-1'));
                    var timeStep = []
                    var companyAvgSalary = []
                    var similarCompanyAvgSalary = []

                    // build chart needed data
                    for (var key in companyTimeStepData)
                        {
                            timeStep.push(key)
                            companyAvgSalary.push(companyTimeStepData[key]['companyAvgSalary'])
                            similarCompanyAvgSalary.push(companyTimeStepData[key]['similarCompanyAvgSalary'])
                        }
                    // salary compare chart
                    option_1_1 = {
                        legend:{
                            data:['查询公司平均薪资','相似公司平均薪资']
                        },
                        xAxis:[
                            {
                                type: 'category',
                                data: timeStep
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '薪资平均值',

                            }
                        ],
                        series:[
                            {
                                name:'查询公司平均薪资',
                                type:'bar',
                                data:companyAvgSalary
                            },
                            {
                                name:'相似公司平均薪资',
                                type:'bar',
                                data:similarCompanyAvgSalary
                            }
                        ]
                    }
                     mychart1_1.setOption(option_1_1);

                     // company category chart part
                     var mychart1_2 = echarts.init(document.getElementById('chart1-2'));
                     var category_type = ["产品","其他","市场与销售","房地产","技术","教育","法务","生产制造","职能","设计","运营","金融"]
                     option_1_2 = {
                        tooltip:{
                            position: 'top'
                        },
                        title: [],
                        singleAxis: [],
                        series: []
                     };
                     echarts.util.each(category_type, function(category, idx){
                            option_1_2.title.push({
                                textBaseline: 'middle',
                                top: (idx+0.5)*100/12+'%',
                                text: category
                            });
                            option_1_2.singleAxis.push({
                                left: 150,
                                type: 'category',
                                boundaryGap: false,
                                data: timeStep,
                                top : (idx*100/12+2)+ '%',
                                height: (100/12-6)+ '%',
                                axisLabel: {
                                    interval:2
                                }
                            });
                            option_1_2.series.push({
                                singlesAxisIndex: idx,
                                coordinateSystem: 'singleAxis',
                                type: 'scatter',
                                data: [],
                                symbolSize: function(dataItem){
                                    return dataItem[1]*4
                                }
                            })
                     });
                     var count = 0
                     for (var idx in companyTimeStepData){
                            for(var category_idx in companyTimeStepData[idx]['categoryTypeDis'])
                            {
                                option_1_2.series[category_idx].data.push([count,companyTimeStepData[idx]['categoryTypeDis'][category_idx]['value']])
                            }
                            count = count + 1
                     }
                     mychart1_2.setOption(option_1_2);
                }
            })

        })
    });
    var mychart1 = echarts.init(document.getElementById('chart1'));
    var mychart1_1 = echarts.init(document.getElementById('chart1-1'));
    var mychart1_2 = echarts.init(document.getElementById('chart1-2'));
    var timeStep = []
    var companyAvgSalary = []
    var similarCompanyAvgSalary = []

    // build chart needed data
    for (var key in companyTimeStepData)
        {
            timeStep.push(key)
            companyAvgSalary.push(companyTimeStepData.key.companyAvgSalary)
            similarCompanyAvgSalary.push(companyTimeStepData.key.similarCompanyAvgSalary)
        }
    // salary compare chart
    option_1_1 = {
        legend:{
            data:['查询公司平均薪资','相似公司平均薪资']
        },
        xAxis:[
            {
                type: 'category',
                data: timeStep
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '薪资平均值',

            }
        ],
        series:[
            {
                name:'查询公司平均薪资',
                type:'bar',
                data:companyAvgSalary
            },
            {
                name:'相似公司平均薪资',
                type:'bar',
                data:similarCompanyAvgSalary
            }
        ]
    }
     mychart1_1.setOption(option_1_1);



//    category type
//
//
//    var categoryTypeData;
    $.get('/chart/categoryInfo',function(data,status){
        var categoryTypeData = data
        //build category chart data
        var category_timeStep = []
        var category_count = []
        var category_value = {}
        for (var time in categoryTypeData)
        {
            category_timeStep.push(time)
            category_count.push(categoryTypeData[time]['categoryTypeCount'])
            category_value[time] = []
            for (var index in categoryTypeData[time]['categoryTypeDis'])
            {
                category_value[time].push(categoryTypeData[time]['categoryTypeDis'][index])
            }

        }

        statisticData = {
            201601: [5632,37679,97832,12283,74959,18683,646,10547,59670,11332,22076,6756],
            201602: [20079,191453,518503,53754,386163,98137,4157,66576,286743,49800,88015,17549],
            201603: [9162,75468,302253,26519,138917,60875,2253,20434,147991,22991,48757,21183],
        }
        var categoryList = ["产品","其他","市场与销售","房地产","技术","教育","法务","生产制造","职能","设计","运营","金融"]
        var timeStep = ["201601","201602","201603"]
        var myChart = echarts.init(document.getElementById('chart1'));
        function build_pie_value(key){
            var pie_value = [];
            for (var x in categoryList){
                pie_value.push({
                    name:categoryList[x],
                    value:statisticData[key][x]
                })
            }
            return pie_value
        }
        option = {
            baseOption: {
                timeline: {
                    // y: 0,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: true,
                    // currentIndex: 2,
                    playInterval: 1000,
                    // controlStyle: {
                    //     position: 'left'
                    // },
                    data: category_timeStep,
                    label: {
                        formatter: function (s) {
                            return s.substring(0, 6)
                        }
                    }
                },
                title: {
                    subtext: '招聘测试数据'
                },
                tooltip: {},
                legend: {
                    x: 'right',
                    data: ['数量'],
    //                selected: {
    //                    'GDP': false, '金融': false, '房地产': false
    //                }
                },
                calculable : true,
                grid: {
                    top: 80,
                    bottom: 100
                },
                xAxis: [
                    {
                        'type':'category',
                        'axisLabel':{'interval':0},
                        'data': categoryList,
                        splitLine: {show: false}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量（个）'
                    }
                ],
                series: [
                    {name: '职位类型数量', type: 'bar'},
    //                {name: '金融', type: 'bar'},
    //                {name: '房地产', type: 'bar'},
    //                {name: '第一产业', type: 'bar'},
    //                {name: '第二产业', type: 'bar'},
    //                {name: '第三产业', type: 'bar'},
                    {
                        center: ['80%', '25%'],
                        radius: '28%',
                        name:'职位分布',
                        type:'pie',
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                    }
                ]
            },
            options:[]
        }
        echarts.util.each(category_timeStep,function(time,idx){
            option.options.push({
                title:{text: time+'招聘职位类型分布'},
                series:[
                    {data:category_value[time]},
                    {data:categoryTypeData[time]['categoryTypeDis']}
                ]
            })
        })

        myChart.setOption(option);
    })


</script>
{% end %}